<template>
  <div id="app" style="text-align: center">
    <ParticleEffect
      :hidden="effectHidden"
      direction="left"
      particle-type="triangle"
      particle-style="fill"
      :duration="2000"
      easing="easeInOutCubic"
      particle-color="#000"
      :canvas-padding="150"
      :size="4"
      :speed="2"
      :particles-amount-coefficient="3"
      :oscillation-coefficient="20"
      @begin="onBegin"
      @complete="onComplete"
    >
      <div
        @click="handleClick"
        style="
          width: 800px;
          height: 500px;
          background: #eee;
          justify-content: center;
          align-items: center;
          font-size: 40px;
          font-weight:700;
          display:flex;
        "
      >
        大家好 ~~
      </div>
    </ParticleEffect>
  </div>
</template>

<script>
import ParticleEffect from "./components/particle-effect";

export default {
  name: "App",
  components: {
    ParticleEffect,
  },
  data() {
    return {
      effectHidden: false,
    };
  },
  methods: {
    handleClick() {
      this.effectHidden = true;
    },
    onBegin() {
      console.log("begin event");
    },
    onComplete() {
      console.log("complete event");
    },
  },
};
</script>

<style>
html{
  overflow: hidden;
}
</style>
